import React from 'react';
import ReactDOM from 'react-dom';
import Navv from './nav.jsx';
import '../../static/tero/public_two.less'
import '../../static/tero/journa.less'
import u from '../../common.js'
import $ from 'jquery'



class Journa extends React.Component {
    constructor(props) {
        super(props)
        this.onmouseenter = this.onmouseenter.bind(this)
        this.onmouseleave = this.onmouseleave.bind(this)
        this.state = {
            data: {},
            str1: '',
            str2: '',
            // str1: '黑色调搭配金色招牌，有些五星酒店的风格。团购套餐不能用包间，但我想他家比较高端，散座的客人不多的话，环境也应该是很好的。事实上，散座的环境也确实很好。他家的散座不是通间的大厅，而是有隔断的几间，一间里大概可以坐4桌客人，也是有透明隔断的，私密性挺好，完全不会有被邻桌打扰的感觉。环境有些像会所，光线暗暗的，私密有品。对他家的环境很满意，觉的散座也差不多像包间一样了。吃的方面，团购了一个4人套餐，我们去了6个人，又加点了1个凉菜和2个热菜，总共是4个凉菜，8个热菜，1个主食，1个小食，1个甜品。菜品卖相和味道都很精致，每道菜都是店家用心做的，都挺好吃，没有不喜欢的，即使是最普通的清炒小油菜，也挺有滋味。而且菜量也实在，实际上他家的4人餐，我们6个人吃都是足够的了，因为加点了菜，最后打包了不少。团购套餐的品质十分有保证，和之前吃过一些所谓的挺有名的大店，团购套餐却十分的渣形成鲜明的对比，他家很有大店风范。服务方面，服务生服务挺周到的，态度也好，上菜时，会帮忙将大份的菜处理成小块，清蒸鱼会帮忙去骨，以方便客人食用，桌子小盘子大，吃一会儿，服务生给主动给换成小盘，就餐过程中还会帮忙换骨碟，就餐感受很好。总的来讲，是一家各方面都很有品质的店，感觉请客很有面子，特别现在他家有团购，折扣力度很大，价格相对是很亲民的。',
            // str2: '黑色调搭配金色招牌，有些五星酒店的风格。团购套餐不能用包间，但我想他家比较高端，散座的客人不多的话，环境也应该是很好的。事实上，散座的环境也确实很好。他家的散座不是通间的大厅，而是有隔断的几间，一间里大概可以坐4桌客人，也是有透明隔断的，私密性挺好，完全不会有被邻桌打扰的感觉。环境有些像会所，光线暗暗的，私密有品。对他家的环境很满意，觉的散座也差不多像包间一样了。吃的方面，团购了一个4人套餐，我们去了6个人，又加点了1个凉菜和2个热菜，总共是4个凉菜，8个热菜，1个主食，1个小食，1个甜品。菜品卖相和味道都很精致，每道菜都是店家用心做的，都挺好吃，没有不喜欢的，即使是最普通的清炒小油菜，也挺有滋味。而且菜量也实在，实际上他家的4人餐，我们6个人吃都是足够的了，因为加点了菜，最后打包了不少。团购套餐的品质十分有保证，和之前吃过一些所谓的挺有名的大店，团购套餐却十分的渣形成鲜明的对比，他家很有大店风范。服务方面，服务生服务挺周到的，态度也好，上菜时，会帮忙将大份的菜处理成小块，清蒸鱼会帮忙去骨，以方便客人食用，桌子小盘子大，吃一会儿，服务生给主动给换成小盘，就餐过程中还会帮忙换骨碟，就餐感受很好。总的来讲，是一家各方面都很有品质的店，感觉请客很有面子，特别现在他家有团购，折扣力度很大，价格相对是很亲民的。',
            img: [],
            contentold: '',
            changeColor: false,
            titleContentPrint: '',
            totalNum: 0,
            getSameList: [],
        }
    }
    rendering(changeId, titlePrint) {
        let that = this;
        let data = this.props.location.search.split('?').length == 2 ? {
            id: this.props.location.search.split('?')[1],
            keyWord: localStorage.getItem('shouYeKeyWord')
        } : {
                id: changeId ? changeId : this.props.location.search.split('?')[1],
                keyWord: decodeURI(this.props.location.search.split('?')[2]),
                highlightLength: true
            };
        u.dataStatistics(data, data => {

            let contentold = data.data[0].content
            if (data.data.length == 0) return

            let titleContentPrint = data.data[0].titleContentPrint
            this.onGetSame(titleContentPrint)
            // this.setState({
            //     titleContentPrint: titleContentPrint
            // })

            //let str = data.data[0].content;
            let str = localStorage.getItem('content')
            str = str.replace(/<vrv-img\/>/g, '')
            let img = data.data[0].img
            // let str1 = str.substr(0, str.length / 2 - 1)
            // let str2 = str.substr(str.length / 2)
            let arr = img.split('http');
            arr.shift();
            let i = 0;
            for (i; i <= arr.length - 1; i++) {
                arr[i] = 'http' + arr[i]
            }
            that.setState({
                data: data.data[0],
                str1: str,
                // str2: str2,
                img: arr,
                contentold: contentold
            })
        })
    }
    componentWillMount() {
        console.log(decodeURI(this.props.location.search.split('?')[2]))
        this.rendering()
    }

    onGetSame(titleContentPrint) {
        u.getSame({

            // "id":"74f47dee3bfcd93a57b20467f9c710c9",
            // "titleContentPrint":"4d691fef76227de66d34769c1b4b4567"
            id: this.props.location.search.split('?')[1],
            titleContentPrint: titleContentPrint

        }, data => {
            let sameList = []
            sameList = data.data.list.map(el => {

                return {
                    fromWhere: el.webSite,
                    createTime: new Date(el.poTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(el.poTime).toTimeString().substr(0, 8),
                    title: el.title,
                    content: el.content,
                    id: el.id,
                    titleContentPrint: el.titleContentPrint
                }
            })
            console.log(sameList)

            let num = data.data.list.length
            this.setState({
                totalNum: num,
                getSameList: sameList
            })
        })


    }


    onmouseenter() {
        this.setState({
            changeColor: true
        })
    }
    onmouseleave() {
        this.setState({
            changeColor: false
        })
    }

    selectOne(id, titlePrint) {
        if (decodeURI(this.props.location.search.split('?')[2]) !== 'undefined') {
            let keyWord = decodeURI(this.props.location.search.split('?')[2])
            this.selectOneList(id, keyWord, titlePrint)
        } else {
            let keyWord = localStorage.getItem('shouYeKeyWord')
            this.selectOneList(id, keyWord, titlePrint)
        }
    }

    selectOneList(id, keyWord, titlePrint) {
        u.dataStatistics({
            id: id,
            keyWord: keyWord,
            highlightLength: true,
            statusType: '1'
        }, data => {
            if (data.data.length === 0) {
                this.changeAPI(id, titlePrint)
                return
            }
            let contentold = data.data[0].content
            this.setState({
                data: data.data[0],
                contentold: contentold
            })
            this.getLIst(id, titlePrint)
        })
    }

    changeAPI(id, titlePrint) {
        u.detail({
            id: id
        }, data => {
            let contentold = data.data[0].content
            this.setState({
                data: data.data[0],
                contentold: contentold
            })
        })
        this.getLIst(id, titlePrint)
    }

    getLIst(id, titlePrint) {
        u.getSame({
            "id": id,
            "titleContentPrint": titlePrint
            // id: this.props.location.search.split('?')[1],
            // titleContentPrint: titleContentPrint

        }, data => {
            let sameList = []
            sameList = data.data.list.map(el => {
                return {
                    fromWhere: el.webSite,
                    createTime: new Date(el.poTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(el.poTime).toTimeString().substr(0, 8),
                    title: el.title,
                    content: el.content,
                    id: el.id,
                    titleContentPrint: el.titleContentPrint
                }
            })
            let num = data.data.list.length
            this.setState({
                totalNum: num,
                getSameList: sameList
            })
        })
    }

    render() {
        return (
            <div className="boxStyle">
                <div className={this.state.getSameList.length === 0 ? 'tero_father tero_journa' : 'tero_father tero_journa moveStyle'} >
                    <div className='nav_bc' style={{ display: 'block', paddingTop: '20px' }}>
                        {
                            this.state.data.title ? <h3 dangerouslySetInnerHTML={{ __html: this.state.data.title }}></h3> : ''
                        }
                        <div className='nav_bc_title'><span style={{ display: this.state.data.author ? 'inline-block' : 'none' }}><b>发布人：</b>{this.state.data.author || ''}</span><span><b>发布时间：</b>{u.unixTime(this.state.data.poTime) || ''}</span><span><b>转载自：</b>{this.state.data.webSite || ''}</span><span><b>原文链接：</b><a href={this.state.data.url} target="view_window">点此进入</a></span></div>
                        <div className='nav_bc_title_content'> <p dangerouslySetInnerHTML={{ __html: this.state.contentold.replace(/<vrv-img\/>/g, '') }}></p>

                            <p dangerouslySetInnerHTML={{ __html: this.state.str2 }}></p></div>

                    </div>
                </div>
                <div className={this.state.getSameList.length === 0 ? 'right' : 'right moveStyle2'}>
                    <div className='title'>相似文章<span>({this.state.totalNum})</span></div>
                    <div className='rcontent'>
                        {
                            this.state.getSameList.map((item, index) => {
                                return (
                                    <div key={index} className={this.state.changeColor ? 'content' : 'content'}
                                        onClick={this.selectOne.bind(this, item.id, item.titleContentPrint)}
                                        onMouseEnter={this.onmouseenter}
                                        onMouseLeave={this.onmouseleave}
                                    >
                                        <div className={this.state.changeColor ? 'smallTitle' : 'smallTitle'}>
                                            {item.fromWhere}<br />
                                            <span>{item.createTime}</span>
                                        </div>
                                        <div className="endTitle">
                                            {item.title}
                                        </div>
                                        <div className={this.state.changeColor ? 'conStyle' : 'conStyle'}>
                                            {item.content.replace(/<\/?.+?>/g, "")}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>


                </div>
            </div>
        )
    }
}




export default Journa